<template>
    <div class="">
        <el-dialog
            title="密码找回"
            v-dialogDrag
            :visible.sync="ForgetPasswordVisible"
            ref="phone"
            width="330px"
            :modal-append-to-body="true"
            :append-to-body="true"
            @close="resetForm('ruleForm')"
            :close-on-click-modal="false"
            center
        >
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" @submit.native.prevent>
                <el-form-item label="" prop="Username">
                    <el-input type="text" placeholder="请输入用户名" v-model.trim="ruleForm.Username" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="" prop="Password">
                    <el-input type="password" placeholder="请输入密码" v-model.trim="ruleForm.Password" autocomplete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="" prop="ProblemOne">
                    <el-input type="text" placeholder="请输入问题一" v-model.trim="ruleForm.ProblemOne" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="AnswerOne">
                    <el-input type="text" placeholder="请输入答案一" v-model.trim="ruleForm.AnswerOne" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="ProblemTwo">
                    <el-input type="text" placeholder="请输入问题二" v-model.trim="ruleForm.ProblemTwo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="AnswerTwo">
                    <el-input type="text" placeholder="请输入答案二" v-model.trim="ruleForm.AnswerTwo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="Birthday">
                    <el-input type="text" placeholder="请输入生日" v-model.trim="ruleForm.Birthday" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="margin-top: 24px" type="primary" class="button_btn" @click="ForgetModification('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
  props: {},
  created () { },
  data () {
    const phonevalidatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.Password !== '') {
          this.$refs.ruleForm.validateField('OriginalPass');
        }
        callback();
      }
    };
    return {
      ForgetPasswordVisible: false,
      ruleForm: {
        Username: '', //用户名
        // Password: '', //密码
        ProblemOne: '', //问题一
        AnswerOne: '', //答案一
        ProblemTwo: '', //问题二
        AnswerTwo: '', //答案二
        Birthday: ''//生日
      },
      rules: {
        Username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        // Password: [{ validator: phonevalidatePass, trigger: 'blur' }, { min: 4, max: 18, message: '密码必须在4-18位之间', trigger: 'blur' }],
        ProblemOne: [{ required: true, message: '请输入问题一', trigger: 'blur' }],
        AnswerOne: [{ required: true, message: '请输入答案一', trigger: 'blur' }],
        ProblemTwo: [{ required: true, message: '请输入问题二', trigger: 'blur' }],
        AnswerTwo: [{ required: true, message: '请输入答案二', trigger: 'blur' }],
        Birthday: [{ required: true, message: '请输入生日', trigger: 'blur' }],
      }
    }
  },
  mounted () { },
  methods: {
    ForgetModification (formName) {
      try {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            var that = this
            const username = this.ruleForm.Username
            // const password = this.ruleForm.Password
            const problemone = this.ruleForm.ProblemOne
            const answerone = this.ruleForm.AnswerOne
            const problemtwo = this.ruleForm.ProblemTwo
            const answertwo = this.ruleForm.AnswerTwo
            const birthday = this.ruleForm.Birthday
            game.forget_account(username, problemone, answerone, problemtwo, answertwo, birthday, function (result) {
              if (result) {
                setTimeout(() => {
                  if (game.forget_account_info.status === 1005) {
                    that.$message({ message: game.forget_account_info.msg + ',密码为:' + game.forget_account_info.password, type: 'success', center: true })
                    that.ForgetPasswordVisible = false
                  } else {
                    that.$message({ message: game.forget_account_info.msg, type: 'warning', center: true })
                  }
                }, 1000)
              } else {
                that.$message({ message: '请求失败,请稍后再试', type: 'warning', center: true })
                return false
              }
            })
          }
        });
      } catch (err) {
        console.log(err);
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
  },
  computed: {},
  watch: {},
  components: {},
}
</script>

<style scoped lang='less'>
/deep/.el-dialog__body {
    padding: 25px 30px 30px !important;
    background: url('@/assets/dialogImg/Pop-up_bj.png');
    height: 384px !important;
}
/deep/ .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #a47e49;
    border-radius: 4px;
    color: #dddddd;
}
/deep/.el-input__inner:hover,
.el-input__inner:focus {
    border-color: #ffb331;
}
/deep/ .el-input__inner:focus {
    border-color: #ffb331;
}
/deep/input::-webkit-input-placeholder {
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #978152;
    font-family: '微软雅黑';
}
/deep/.el-form-item {
    margin-bottom: 6px;
}
/deep/.el-form-item__error {
    padding: 0px !important;
}
</style>
